// 品牌详情页面
<template>
  <div class="container">
    <nav-login></nav-login>
    <home-seach></home-seach>
    <goods-nav></goods-nav>

    <div class="w1200">
      <p class="title">
        <router-link tag="span" to="/" style="cursor: pointer;">首页</router-link>>
        列表页
      </p>
      <no-data v-if="show" :msg="msg"/>
      <template v-else>
        <div class="BrandHead">
          <div class="w1124">
            <ul class="BrandIntroduction">
              <li>{{ BrandIntroduction.name }}</li>
              <li>{{ BrandIntroduction.des}}</li>
            </ul>

            <div class="category">
              <span>{{ categorytitle }}：</span>
              <ul>
                <li
                  v-for="(item,index) in categoryDetails"
                  :key="item.id"
                  :class="index == indexs ? 'active' : '' "
                  @click="changesnav(index,item.id)"
                >{{ item.cate_title }}</li>
              </ul>
            </div>
          </div>
        </div>

        <brand-lists
          :page="page"
          :total="total"
          :current_page="current_page"
          :goodsList="goodsList"
          @changeScreen="changeScreen"
          @pagesChange="pagesChange"
          v-loading="loading"
        ></brand-lists>
      </template>
    </div>
    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>
<script>
// import BrandLists from "./components/BrandLists"; // 品牌列表
import { mapState } from 'vuex'
export default {
  name: "brandDetails",

  data() {
    return {
      cate_id:'',
      show: false,
      msg: '暂无相关数据...',
      mycode: '200',
      loading: false,
      goodsList: [],
      page: 1,
      total: 1,  // 分页总数
      current_page: 1, // 当前页面
      // navindex : 2
      BrandIntroduction: {
        name: "",
        des: ''
      },
      categorytitle: "类别",
      categoryDetails: [],
      indexs: null
    }
  },
  computed: {
    ...mapState(['changeBrand'])
  },
  methods: {
    // 分页点击事件
    pagesChange(mypage) {
      this.getData(mypage, this.mycode)
    },
    // 子组件激发 排序
    changeScreen({ index, count }) {
      console.log(index, count)
      switch (index) {
        case 0:
          this.getData()
          this.mycode = 200
          break

        case 1:

          if (count) {
            let mycode = 300
            this.mycode = 300
            this.getData(1, mycode)
          } else {
            let mycode = 400
            this.mycode = 400
            this.getData(1, mycode)
          }


          break

        case 2:

          if (count) {
            let mycode = 500
            this.mycode = 500
            this.getData(1, mycode)
          } else {
            let mycode = 600
            this.mycode = 600
            this.getData(1, mycode)
          }

          break
      }
    },
    // 类别选择
    async changesnav(index, cate_id ) {
      this.indexs = index
      this.cate_id = cate_id
      this.current_page = 1
      this.getData(this.current_page, this.mycode, cate_id)
    },

    async getData(mypage = this.current_page, mycode = '200', mycate = this.cate_id) {
      this.loading = true
      let brand_id = this.changeBrand.toString(),
        page = mypage,
        code = mycode,
        cate_id = mycate
      let res = await this.$http({
        method: 'post',
        url: '/api/index/web/brandGoods',
        data: {
          brand_id,
          page,
          code,
          cate_id
        }
      })
      if (res.data.State.Code == 200 && res.data.data[0]) {
        this.BrandIntroduction.name = res.data.brand.brand_title
        this.BrandIntroduction.des = res.data.brand.brand_desc
        this.categoryDetails = res.data.cate_title
        this.total = res.data.total
        this.current_page = res.data.current_page
        this.goodsList = res.data.data
        this.loading = false
      } else {
        this.loading = false
        this.show = true
      }

    }
  },

  components: {
    BrandLists: () => import('./components/BrandLists')
  },
  mounted() {
    
    this.$store.commit('changeBrand', this.$route.params.id)
    this.getData()
  }
}
</script>
<style lang="scss" scoped>
.container {
  .w1200 {
    width: 1200px;
    margin: auto;
    .title {
      padding: 0 10px;
      font-size: 14px;
      color: #3a3a3a;
      line-height: 14px;
      border-left: 3px solid #a2a2a2;
      margin: 25px 0px;
    }
    .BrandHead {
      width: 100%;
      border: 1px solid #f0f0f0;
      margin-bottom: 20px;
      .w1124 {
        width: 1124px;
        margin: auto;
        .BrandIntroduction {
          display: flex;
          border-bottom: 1px solid #f0f0f0;
          align-items: center;
          padding: 10px 0px;
          li {
            margin: 5px 0px;
            &:first-child {
              width: 116px;
              border-right: 1px solid #f0f0f0;
              padding: 0px 5px;
              margin-right: 20px;
            }
            &:last-child {
              flex: 1;
            }
          }
        }
        .category {
          display: flex;
          padding: 15px 0px;
          span {
            width: 116px;
            padding: 5px 5px;
            margin-right: 20px;
          }
          ul {
            display: flex;
            flex-wrap: wrap;
            li {
              padding: 5px 10px;
              // cursor: pointer;
              &:hover {
                color: #ff0000;
                cursor: pointer;
              }
            }
            .active {
              color: #ff0000;
            }
          }
        }
      }
    }
  }
}
</style>


